<template>
	<div>
		<form>

			<el-row>
				<el-col :span="10">

					<el-input v-model="query.menuName" placeholder="请输入菜单名称"></el-input>
				</el-col>

				<el-col :span="4">

					<el-button type="primary" @click="list">查询</el-button>
					<el-button type="primary" @click="add" >添加</el-button>

				</el-col>
			</el-row>
		</form>

		<el-table size="mini" :data="tableData" style="width: 100%" row-key="menuId" :tree-props="{children: 'children'}">


			<el-table-column label="主键" prop="menuId">
			</el-table-column>
			<el-table-column label="菜单名称" prop="menuName">
			</el-table-column>
			<el-table-column label="菜单路径" prop="url">
			</el-table-column>

			<el-table-column label="是否有效" >
				<template slot-scope="scope">
					
					<el-tag v-if="scope.row.active == 1">有效</el-tag>
					
					<el-tag type="info" v-else>无效</el-tag>
			
				</template>
				
				
			</el-table-column>


			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<el-button size="mini" @click="addChild(scope.row.menuId)">添加子菜单</el-button>
					<el-button size="mini" @click="edit(scope.row.menuId)">编辑</el-button>
					<el-button size="mini" type="danger" @click="del(scope.row.menuId)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>


		<el-pagination background layout="prev, pager, next" @current-change="currentChange" :current-page.sync="query.pageNo"
		 :page-size="query.pageSize" :total="total">
		</el-pagination>

		<el-dialog title="菜单编辑" :visible.sync="showEdit" width="480px">

			<MenuEdid :showEdit.sync="showEdit" :pId="pId" @update="list" :menuId="menuId" :key="showNum"></MenuEdid>

		</el-dialog>

	</div>
</template>

<script>
	import MenuEdid from '@/views/menu/edit'
	export default {
		name: 'MenuList',
		components: {
			MenuEdid
		},
		data() {
			return {
				showNum: 0,
				total: 0,
				menuId: null,
				pId:null,
				showEdit: false,
				query: {
					pageSize: 10,
					pageNo: 1,
					menuName: ''
				},
				tableData: []
			}
		},
		methods: {
			list() {

				this.axios.get('/menu?type=query', (data) => {
					this.tableData = data.list;
					this.pageSize = data.pageSize;
					this.total = data.totalCount;
				}, this.query);
			},
			addChild(menuId) {
				this.showNum++;
				this.pId = menuId;
				this.menuId = null;
				this.showEdit = true;
			},
			add(menuId) {
				this.showNum++;
				this.pId = null;
				this.menuId = null;
				this.showEdit = true;
			},
			edit(id) {
				this.menuId = id;
				this.showNum++;
				this.showEdit = true;
			},
			del(id) {



				this.$confirm('删除数据, 是否继续?', '提示', {
					type: 'warning'
				}).then(() => {
					this.axios.get('/menu?type=del', (data) => {
						if (data) {
							this.$alert("删除成功", "提示", {
								type: 'success'
							});
							//刷新页面
							this.list();
						}
					}, {
						menuId: id
					});
				});

			},
			currentChange() {
				this.list();
			}

		},
		created() {

			this.list();
		}
	}
</script>

<style>
</style>
